<template>
  <div class="querendingdan">
      <div class="xinxi"><span >订单信息</span></div>
        <div class="xiadanriqi">
            <span class="riqi">下单日期：</span><span>2020.08.14&nbsp;16:00</span>
        </div>
        <div class="xiadanriqi">
            <span class="riqi">订单编号：</span><span>95279527AA</span>
        </div>
        <div class="xiadanriqi">
            <span class="riqi">收货地址：</span>
        </div>
        <div class="dizhi">
            <p>成都市武侯区区</p>
            <p>肖家河大厦3楼千峰</p>
        </div>
        <div class="xiadanriqi">
            <span class="riqi">收货时间：</span><span>不限收货时间</span>
        </div>
        <div class="putongfapiao1">
            <p class="putongfapiao">发票信息：</p>
            <span class="putongfapiao">电子普通发票：</span><span>个人</span>
        </div>
        <div class="xinxi"><span >发货单</span></div>
        <div class="buzou">
            <van-steps :active="active">
            <van-step>买家下单</van-step>
            <van-step>商家接单</van-step>
            <van-step>买家提货</van-step>
            <van-step>交易完成</van-step>
            </van-steps>
        </div>
    <div class="putongfapiao1">
            <p class="putongfapiao">物流信息：</p>
            <span class="putongfapiao">顺丰快递：</span><span>SAD45WQEQWXZC8</span><van-button  type="info" size="mini" color="green"  @click="handleCliclCopy">复制单号</van-button>
        </div>
    <div class="xiadanriqi">
        <span class="riqi">物流进度：</span><span>已收货</span>
    </div>
    <van-card
      v-for="prod in handleNa"
      :key="prod.id"
      :num="prod.amount"
      :price="prod.price | money"
      :desc="prod.title"
      :title="prod.title"
      :thumb="prod.image"
    />
    <div class="xinxi"><span >订单金额</span></div>
    <div class="jingdanjine">
        <span class="jingdanjineleft">订单金额</span> <span class="jingdanjineright" > {{ totalCheckedMoney }} </span>
    </div>
    <div class="jingdanjine">
        <span class="jingdanjineleft">商品总价</span> <span class="jingdanjineright"> {{ totalCheckedMoney }}</span>
    </div>
    <div class="jingdanjine">
        <span class="jingdanjineleft">运费</span> <span class="jingdanjineright">0元</span>
    </div>
    <div class="xinxi"><span >相关服务</span></div>
    <div class="zuidibu">
        <p class="zuidibup">如果你需要查看电子发票、修改订单信息、查看服务进度。</p>
        <p class="zuidibup">请下载小米商城APP</p>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'Querendingdan',
  data() {
    return {
      active: 4,
    }
  },
  methods: {
    handleCliclCopy() {
      Toast.success({
        message: '已复制订单号',
        duration: 500,
      })
    },
  },
  computed: {
    handleNa() {
      return this.$store.getters['cart/cart'].filter(function(element) { return element.checked })
    },
    totalCheckedMoney() {
      return this.$store.getters['cart/totalCheckedMoney']
    },
  },
  filters: { // 过滤器，用于文本格式化
    money(val) {
      return Number(val).toFixed(2)
    },
  },
}
</script>

<style lang="less" scoped>
.xinxi{
    height: 50px;
    line-height: 50px;
    background-color: #F6F6F6;
    font-size: 14px;
    span{
    margin-left:15px ;
    }

}
.xiadanriqi{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    border-bottom: 3px solid #F6F6F6;
}
.riqi{
        margin-left:15px ;
        color: #999999;
    }
.dizhi{
    height: 70px;
    line-height: 24px;
    border-bottom: 3px solid #F6F6F6;
    font-size: 16px;
    p{
        margin-left:15px ;
    }

}
.putongfapiao{
    margin-left:15px ;
        color: #999999;
}
.putongfapiao1{
   height: 70px;
    line-height: 20px;
    border-bottom: 3px solid #F6F6F6;
    font-size: 16px;
    .van-button{
    margin-left:15px ;
    margin-bottom: 20px;
}
}
.buzou{
    // height: 70px;
    border-bottom: 3px solid #F6F6F6;
    // line-height: 50px;
}
.jingdanjine{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    border-bottom: 3px solid #F6F6F6;
    .jingdanjineleft{
        margin-left:15px ;
    }
    .jingdanjineright{
        color: red;
        float: right;
        margin-right: 15px;
    }
}
.zuidibup{
    font-size: 10px;
    color: #666666;
    text-align: center;
}

</style>
